Bootstrap Snippet Navbar fixed top using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--navigation-->
 <div class="head" id="navbar">
  <a href="" class="logo">LOGO HERE</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#about">About</a></li>
    <li><a href="#team">Meet</a></li>
    <li><a href="#skills">Service</a></li>
    <li><a href="#portfolio">Gallery</a></li>
    <li><a href="#testimonial">Testimonial</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>
<!-- Header Section-->
<header id="header">  
 <div class="title">
 <h1 class="heading">Simple</h1>
 <h2 class="heading">Just a sample website
 </h2></div><div class="scroll-down"></div>
</header>
<!-- About Section -->  
<section id="about">
 <div class="container">
  <div class="row">
   <h2>About</h2>
      <div class="block"></div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores rc ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="row">
      <div class="six columns">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Base Styles*/
html {font-size: 61%;
  scroll-behavior: smooth;}
body {
    font-size: 1.5em;
    line-height: 1.6;
    font-weight: 400;
    margin: 0px;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: #222;}
/* Grid */  
.container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0px 20px;
    box-sizing: border-box;}
.column, .columns {
    width: 100%;
    float: left;
    box-sizing: border-box;}
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
    width: 85%;
    padding: 0;}}
/* For devices larger than 550px */
@media (min-width: 550px) {
.container {width: 80%;}
.column,.columns {margin-left: 31px;}
.column:first-child,.columns:first-child {
    margin-left: 0;}
.one.column,.one.columns{width:4.66666666667%;}
.two.columns {width: 13.3333333333%;}
.three.columns {width: 100%;}
.three.columns h6{margin-bottom:-23px;height:38px;font-size:17px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
/* navigation*/
window.onscroll = function(){scrollFunction();};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navbar").style.top = "0";} else {
document.getElementById("navbar").style.top = 
"-77px";}}
/*navigation end*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Navbar fixed top"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Navbar fixed top" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"Navbar fixed top"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY